<script setup>
import { getData } from '@/apis/admin/dataAnalysis';
import pie from './pie.vue';
import bar from './bar.vue';
import {ref,computed} from 'vue'
const data = ref({});
const userPie = ref([]);
const productPie = ref([]);
const orderBar = ref([]);
function initData(){
  getData().then(res=>{
    data.value = res.data;
    userPie.value = data.value.user.state.map(item=>({
      name:item.type,
      value:item.value
    }))
    productPie.value = data.value.product.state.map(item=>({
      name:item.type,
      value:item.value
    }))
    orderBar.value = data.value.order.state.map(item=>({
      name:item.type,
      value:item.value
    }))
  })
}

const totalAmount = computed(()=>{
 return Number(data.value.order?.totalAmount)
  
})

initData();
</script>


<template>
  <div class="analysis">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="系统使用总人数"
            :value="data.user?.total"
            :value-style="{ color: '#cf1322' }"
            style="margin-right: 50px"
          >
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="商品总数量"
            :value="data.product?.total"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          >
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="订单总数量/日"
            :value="data.order?.total"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          >
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="销售总额度/日"
            prefix="￥"
            :value="totalAmount"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          >
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-card class="card">
      <div class="pie">
        <div class="user">
          <pie  title="用户与管理员人数占比" :data="userPie" :radius="['40%', '70%']"
          legend-position="bottom"/>
        </div>
        <div class="product">
          <pie  title="商品上架占比" :data="productPie" :radius="['40%', '70%']"
          legend-position="bottom"/>
        </div>
      </div>
      <div class="bar">
        <bar    
          title="订单状态情况比例"
          :data="orderBar"
          y-axis-name="总数"
          color="#91cc75"
          :show-label="true"/>
      </div>
   
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.analysis{
  padding: 20px;
  display: flex;
  flex-direction: column;
  .card{
    margin-top: 30px;
    flex: 1;
    :deep(.ant-card-body){
      height: 100%;
    }
    .pie{
      height: 50%;
      display: flex;
     .user{
      width: 50%;
     } 
     .product{
      width: 50%;
     }
    }
    .bar{
      height: 50%;
      margin-bottom: 30px;
    }

  }
}
</style>